<template>
  <view class="content">
    <view v-if="JSON.stringify(list) != '[]'" class="list-block">
      <view class="item-block1">
        <view
          class="input-block ml-20 mr-20 pl-20 pr-20"
          @click="() => (timeState = true)"
        >
          <view v-if="timeValue" class="select-value">{{ timeValue }}</view>
          <view v-else>请选择</view>
          <u-icon name="arrow-down" color="#999999" size="36rpx"></u-icon>
        </view>
        <view class="head-tit">
          <view>参加培训</view>
          <view class="num">{{ num }}</view>
          <view>次</view>
        </view>
      </view>
      <view class="item-block mt-20" v-for="(item, index) in list" :key="index">
        <view class="header-block pb-20">
          <view class="date-block">{{
            item.training_project ? item.training_project : "-"
          }}</view>
          <view class="header-item pr-30">
            <view>培训结果：</view>
            <view class="result" v-if="item.result == '合格'">{{
              item.result ? item.result : "-"
            }}</view>
            <view class="result1" v-if="item.result == '不合格'">{{
              item.result ? item.result : "-"
            }}</view>
          </view>
        </view>
        <view class="body-block pb-10">
          <view class="training_method pt-20 pb-25"
            >培训方式：{{
              item.training_method ? item.training_method : "-"
            }}</view
          >
          <view class="period pt-20 pb-25"
            >学时：{{ item.period ? item.period : "-" }}学时</view
          >
          <view class="training_time pt-20 pb-25">
            培训日期：{{ item.training_time ? item.training_time : "-" }}
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty-block">
      <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
    </view>
    <u-picker
      :show="timeState"
      keyName="label"
      :columns="defaultDateTime"
      mode="year-month"
      @cancel="pickerCancel"
      @confirm="pickerConfirm($event)"
    ></u-picker>
  </view>
</template>

<script>
import { getTrainingResultPageMobileApi } from "@/apis/teamsafety/index.js";
export default {
  data() {
    return {
      defaultDateTime: [["2020", "2021", "2022", "2023", "2024", "2025"]],
      timeState: false,
      timeValue: "",
      params: {
        pageNo: 1,
        pageSize: 10,
        yearStr: "2022",
      },
      list: [],
      pushState: true,
      value: 0,
      range: [
        { value: 0, text: "篮球" },
        { value: 1, text: "足球" },
        { value: 2, text: "游泳" },
      ],
      num: 0,
    };
  },
  onPullDownRefresh() {
    this.getDangerEditList(
      Object.assign(this.params, { pageNo: 1, pageSize: 10 })
    );
  },
  onReachBottom() {
    if (this.pushState)
      this.getDangerEditList(
        Object.assign(this.params, { pageNo: this.params.pageNo + 1 }),
        false
      );
  },
  onLoad(options) {
    if (options.userId && options.nickname) {
      uni.setNavigationBarTitle({
        title: options.nickname + '培训记录'
      })
      this.params.userId = options.userId
    }
  },
  onShow() {
    this.getDangerEditList(Object.assign(this.params, { pageNo: 1 }));
  },
  methods: {
    getDangerEditList: function (params, freshState = true) {
      getTrainingResultPageMobileApi(params)
        .then((res) => {
          if (freshState) {
            this.pushState = true;
            this.list = res.list;
            let arr = res.list;
            let datalist = [];
            arr.forEach((item, index) => {
              item.resultList.forEach((item1, index1) => {
                item1.nickname = item.nickname;
                datalist.push(item1);
              });
            });
            this.list = datalist;
            this.num = this.list.length;
          } else {
            this.list = this.list.concat(res.list);
          }
          if (res.list.length < this.params.pageSize) this.pushState = false;
          uni.stopPullDownRefresh();
        })
        .catch((err) => console.warn(err));
    },
    pickerConfirm: function (event) {
      this.timeValue = event.value[0];
      this.params.yearStr = this.timeValue + "";
      this.getDangerEditList(this.params);
      this.timeState = false;
    },
    pickerCancel: function (type) {
      this.timeState = false;
    },
  },
};
</script>

<style>
page {
  background-color: #f4f4f4;
}
</style>

<style lang="scss" scoped>
.text {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.uni-px-5 {
  padding-left: 10px;
  padding-right: 10px;
}

.uni-pb-5 {
  padding-bottom: 10px;
}
.border-b-common {
  border-bottom: 1rpx solid #f4f4f4;
}
.content {
  padding: 0rpx 25rpx 50rpx 25rpx;
  .tab-block {
    background-color: #ffffff;
    z-index: 99;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .list-block {
    .item-block {
      background-color: #ffffff;
      border-radius: 6rpx;
      box-shadow: 0 0 10rpx 0 #f4f4f4;
      padding: 25rpx;
      margin-top: 25rpx;
      .header-block {
        display: flex;
        align-items: center;
        .date-block {
          width: 450rpx;
          font-size: 30rpx;
          line-height: 40rpx;
          //   font-weight: 700;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .header-item {
          display: flex;
          font-size: 25rpx;
          line-height: 35rpx;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .result {
            color: red;
          }
          .result1 {
            color: #999;
          }
        }
        .button-warning {
          @extend .button;
          font-size: 30rpx;
          color: #ff9900;
          border-color: #ff9900;
        }
      }
      .body-block {
        display: flex;
        .training_method {
          width: 200rpx;
          font-size: 25rpx;
          line-height: 35rpx;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .period {
          width: 200rpx;
          font-size: 25rpx;
          line-height: 35rpx;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .training_time {
          width: 300rpx;
          font-size: 25rpx;
          line-height: 35rpx;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .footer-block {
        @extend .header-block;
        align-items: flex-end;
      }
      .button-block {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .button {
          width: 100rpx;
        }
      }
      .tit {
        margin: 30rpx;
        font-size: 35rpx;
        line-height: 45rpx;
        font-weight: 700;
      }
    }
    .item-block1 {
      background-color: #ffffff;
      border-radius: 6rpx;
      box-shadow: 0 0 10rpx 0 #f4f4f4;
      padding: 25rpx 80rpx;
      margin-top: 25rpx;
      display: flex;
      justify-content: space-around;
      .input-block {
        width: 150rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64rpx;
        border: 1rpx solid #bbbbbb;
        border-radius: 8rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #999999;
        .input {
          width: 500rpx;
          font-size: 28rpx;
          line-height: 40rpx;
          color: #333333;
        }
        .placeholder {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #999999;
        }
        .select-value {
          color: #333333;
        }
      }
    }
    .head-tit {
      height: 64rpx;
      display: flex;
      font-size: 35rpx;
      line-height: 64rpx;
      font-weight: 700;
      .num {
        color: red;
      }
    }
  }
  .empty-block {
    padding-top: 300rpx;
  }
}
</style>
